<template id="products">
  <div class="products" ref="Products">
    <div class="pc">
      <div class="options">
        <div class="bottonGroup">
          <div
            class="pcButton"
            v-for="(item, index) in productsButtonList"
            :key="index"
            @click="selectProducts(item)"
            :class="{ isClick: item.id == pcTop }"
          >
            <span> {{ item.name }}</span>
          </div>
        </div>
        <div class="selectGroup" v-if="pcTop == 1">
          <div class="selectItem">
            <div class="currentSelet" @click="openKindOption">
              <img :src="pcTypesIcon" class="pcTypesIcon" />
              <p class="currentName">{{ kindChose.name }}</p>
              <img :src="pcDropdownIcon" class="pcDropdownIcon" />
            </div>
            <div
              class="selectOptions"
              :class="[
                { isShow: isShowKind && !isKindInit },
                { isClose: !isShowKind && !isKindInit }
              ]"
            >
              <div
                class="selectType"
                v-for="item in kindList"
                :key="item.id"
                @click="choseKind(item)"
              >
                <p :class="{ isChoseText: kindChose.id == item.id }">
                  {{ item.name }}
                </p>
                <img :src="pcChoseIcon" class="pcChoseIcon" v-if="kindChose.id == item.id" />
              </div>
            </div>
          </div>
          <div class="selectItem">
            <div class="currentSelet" @click="openTypeOption">
              <img :src="pcTypesIcon" class="pcTypesIcon" />
              <p class="currentName">{{ typeChose.label }}</p>
              <img :src="pcDropdownIcon" class="pcDropdownIcon" />
            </div>
            <div
              class="selectOptions"
              :class="[
                { isShow: isShowType && !isTypeInit },
                { isClose: !isShowType && !isTypeInit }
              ]"
            >
              <div
                class="selectType"
                v-for="item in typeList"
                :key="item.value"
                @click="choseType(item)"
              >
                <p :class="{ isChoseText: typeChose.value == item.value }">
                  {{ item.label }}
                </p>
                <img :src="pcChoseIcon" class="pcChoseIcon" v-if="typeChose.value == item.value" />
              </div>
            </div>
          </div>
          <div class="selectItem">
            <div class="currentSelet" @click="openSortOption">
              <img :src="pcSortIcon" class="pcTypesIcon" />
              <p class="currentName">{{ sortChose.text }}</p>
              <img :src="pcDropdownIcon" class="pcDropdownIcon" />
            </div>
            <div
              class="selectOptions"
              :class="[
                { isShow: isShowSort && !isSortInit },
                { isClose: !isShowSort && !isSortInit }
              ]"
            >
              <div
                class="selectType"
                v-for="item in sortList"
                :key="item.value"
                @click="changeSortValue(item)"
              >
                <p :class="{ isChoseText: sortChose.value == item.value }">
                  {{ item.text }}
                </p>
                <img :src="pcChoseIcon" class="pcChoseIcon" v-if="sortChose.value == item.value" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <p class="searchResult">
        当前展示<span class="totalNum">{{ page.totalPages }}</span
        >个结果
      </p>
      <div class="productsContent">
        <div class="productItem" v-for="(item, index) in productList" :key="index">
          <div class="productImg">
            <img :src="item.image" @click="buyProduct(item)" />
          </div>

          <img
            :src="pcSellout"
            class="pcSellout"
            v-if="!item.goods_stock"
            @click="buyProduct(item)"
          />
          <div v-else-if="item.isOverTime" class="overTimeMask" @click="buyProduct(item)">
            已结束
          </div>
          <div
            class="beginTime"
            v-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
          >
            <p>{{ item.sellTime }}</p>
          </div>
          <div class="beginTime" v-else-if="item.sale_type == 3">
            <p>时间待定</p>
          </div>
          <div class="productDesc">
            <img :src="productImage" class="productImage" />
            <p class="productTitle">{{ item.goods_name }}</p>
            <div class="defaultInfo">
              <img :src="item.icon" />
              <p>{{ item.authorize }}</p>
            </div>
            <md-button
              class="pcBtn lookOver"
              v-if="item.goods_stock && !item.isOverTime"
              @click="buyProduct(item)"
              >{{ pc_changeBuy(item) }}</md-button
            >
            <md-button class="pcBtn sellout" v-else disabled>{{ pc_changeBuy(item) }}</md-button>
          </div>
        </div>
      </div>
      <div class="pcPage" v-if="productList.length > 0">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page.defaultPagination"
          :page-sizes="[8]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.totalPages"
          popper-class="pagePopper"
        >
        </el-pagination>
      </div>
    </div>
    <div class="phone">
      <div class="phoneSelect">
        <div class="tabSelect">
          <div
            class="tabTitle"
            v-for="(item, index) in phoneOptions"
            :key="index"
            :class="{ isSelect: phoneTop == item.id }"
            @click="phoneSelectTop(item)"
          >
            <span>{{ item.name }}</span>
            <div class="backLine"></div>
          </div>
        </div>
        <div class="downSelect" :class="{ borderColor: isShowSelect }" v-if="phoneTop == 1">
          <div class="currentSelect" @click="openSelect">
            <img
              class="sortImage"
              :src="phoneSelect"
              :class="[
                { upSort: !isShowSelect && !isPhone },
                { downSort: isShowSelect && !isPhone }
              ]"
            />
            <p class="sortName">{{ sortName }}</p>
          </div>
          <div class="selectGroup" :class="{ isShowGroup: isShowSelect }">
            <div
              class="selectItem"
              v-for="(item, index) in sortList"
              :key="index"
              @click="selectSort(item)"
            >
              <p :class="{ isSelect: sortValue == item.value }">
                {{ item.text }}
              </p>
            </div>
          </div>
        </div>
        <div
          class="downSelectMark"
          :class="[{ showMark: isShowSelect }, { closeMark: !isShowSelect }]"
        ></div>
      </div>
      <div class="phoneOption" v-if="phoneTop == 1">
        <div
          class="phoneButton"
          v-for="(item, index) in phoneOptionBtns"
          :key="index"
          @click="choseKind(item)"
          :class="{ isClick: item.id == kindChose.id }"
        >
          <p>{{ item.name }}</p>
        </div>
      </div>
      <div class="phoneOption" v-else>
        <div class="phoneButton isClick">
          <p>全部</p>
        </div>
      </div>

      <div class="phoneProducts" v-if="productList.length > 0">
        <div class="productGroup">
          <div
            class="productItem"
            v-for="(item, index) in productList"
            :key="index"
            @click="buyProduct(item)"
          >
            <div class="productImages">
              <div class="productImageBox">
                <img :src="item.image" />
                <img :src="sellout" class="sellout" v-if="!item.goods_stock" />
                <div v-else-if="item.isOverTime" class="overTimeMask">
                  已结束
                </div>
              </div>
              <div
                class="sellDay"
                v-if="item.is_buy === 0 && !item.isOverTime && item.countTimeStatus == 1"
              >
                {{ item.sellTime }}
              </div>
              <div class="sellDay" v-else-if="item.sale_type == 3">
                时间待定
              </div>
            </div>
            <div class="productDesc">
              <p class="productTitle">{{ item.goods_name }}</p>
              <div class="productLimit" v-if="!item.is_buy">
                <p class="limit">限量</p>
                <p class="productCount">{{ item.goods_stock }}份</p>
              </div>
              <div class="productNumber" v-else>商品剩余{{ item.goods_stock }}</div>
              <div class="buy">
                <p class="price"><span>¥</span>{{ item.price }}</p>
                <div class="phoneProductNumber">商品剩余{{ item.goods_stock }}</div>
                <md-button class="md-round buyButton" @click.stop="buyProductDeep(item)">
                  {{ changeBuy(item) }}
                </md-button>
              </div>
            </div>
          </div>
        </div>
        <div class="productEnd">没有更多商品了哦~</div>
      </div>
    </div>

    <div class="noneTip" v-if="productList.length <= 0">
      <img :src="deafultImage" class="deafultImage" />
      <p>该分类下暂无任何商品哦~</p>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { Pagination } from "@/components";
import { getGoodsCatesApi } from "@/api";
import { iscode, getWidth } from "@/utils";
import { mapState } from "vuex";
export default {
  name: "products",
  components: { Pagination },
  props: {
    productList: {
      type: Array
    },
    page: {
      type: Object
    },
    sortList: {
      type: Array
    },
    isShowSelect: {
      type: Boolean
    },
    status: {
      type: Number
    }
  },
  // 定义属性
  data() {
    return {
      typeList: [
        {
          value: 1,
          label: "单品"
        },
        {
          value: 2,
          label: "专辑"
        }
      ],
      kindList: [{ id: "", name: "全部" }],
      deafultImage: require("@/assets/images/mobile/default.png"),
      sortChose: { value: "", text: "默认排序" },
      typeChose: { value: 1, label: "单品" },
      kindChose: { id: "", name: "全部" },
      isTypeInit: true,
      isSortInit: true,
      isKindInit: true,
      isShowType: false,
      isShowSort: false,
      isShowKind: false,
      pcSellout: require("@/assets/images/product/sellout.png"),
      pcSortIcon: require("@/assets/images/mail/sort.png"),
      pcTypesIcon: require("@/assets/images/mail/types.png"),
      pcDropdownIcon: require("@/assets/images/mail/dropdown.png"),
      pcChoseIcon: require("@/assets/images/mail/chose.png"),
      currentSelect: "",
      isMouseOver: false,
      defaultIcon: require("@/assets/images/mail/defaultIcon.png"),
      selectUp: require("@/assets/images/product/selectUp.png"),
      phoneSelect: require("@/assets/images/mobile/phoneSelect.png"),
      rightIcon: require("@/assets/images/product/right.png"),
      sellout: require("@/assets/images/mobile/sellout.png"),
      productImage: require("@/assets/images/mail/productImage.png"),
      typeValue: 1,
      sortValue: 1,
      sortName: "默认排序",
      productsButtonList: [
        {
          id: 1,
          name: "精选"
        },
        {
          id: 2,
          name: "一元购"
        }
      ],
      phoneOptionBtns: [
        {
          image: require("@/assets/images/mail/mail_all.png"),
          id: "",
          name: "全部"
        }
      ],
      currentWidth: "",
      isPhone: false,
      isShowSelectPop: false,
      phoneTop: 1,
      pcTop: 1,
      phoneOptions: [
        {
          id: 1,
          name: "单品"
        },
        {
          id: 2,
          name: "专辑"
        },
        {
          id: 3,
          name: "一元购"
        }
      ]
    };
  },

  // 计算属性，会监听依赖属性值随之变化
  computed: {
    ...mapState(["mailTab"])
  },
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    choseType(item) {
      this.typeChose = item;
      this.isShowType = false;
      if (item.value == 2) {
        this.$router.push("/mail/albumItem");
      }
    },
    choseKind(item) {
      this.kindChose = item;
      this.isShowKind = false;
      this.$emit("changeKind", item.id);
    },
    openTypeOption() {
      this.isShowSort = false;
      this.isShowKind = false;
      this.isTypeInit = false;
      this.isShowType = !this.isShowType;
    },
    openSortOption() {
      this.isShowType = false;
      this.isShowKind = false;
      this.isSortInit = false;
      this.isShowSort = !this.isShowSort;
    },
    openKindOption() {
      this.isShowSort = false;
      this.isShowType = false;
      this.isKindInit = false;
      this.isShowKind = !this.isShowKind;
    },
    //获取商品分类
    async getGoodsCates() {
      let result = await getGoodsCatesApi();
      if (iscode(result)) {
        this.kindList = this.kindList.concat(result.result.list);
        this.phoneOptionBtns = this.phoneOptionBtns.concat(result.result.list);
      }
    },
    changeSortName(val) {
      this.sortList.map((item, index) => {
        if (item.value == val) {
          this.sortName = item.text;
        }
      });
    },
    openSelect() {
      this.$emit("open");
    },
    closeSelect() {
      console.log("in");
      this.$emit("close");
    },
    selectSort(item) {
      this.sortValue = item.value;
      this.sortName = item.text;
      this.$emit("changeSortByPhone", this.sortValue);
    },
    selectProducts(item) {
      this.pcTop = item.id;
      this.$emit("getList", item.id);
    },
    changeBuy(val) {
      if (val.is_buy == 1) {
        if (val.goods_stock) {
          return "立即购买";
        } else {
          return "已售空";
        }
      } else {
        return "预售";
      }
    },
    pc_changeBuy(val) {
      // 售罄(没库存)
      if (val.goods_stock <= 0) {
        return "已售罄";
      } else {
        // 有库存
        if (val.isOverTime) {
          return "已结束";
        } else {
          // 正常或者预售(没有超时)
          return "立即查看";
        }
      }
    },
    buyProduct(item) {
      this.$emit("click", item);
    },
    buyProductDeep(item) {
      this.$emit("buyProductDeep", item);
    },
    handleSizeChange(val) {
      this.$emit("changeSize", val);
    },
    handleCurrentChange(val) {
      this.$emit("changePage", val);
    },
    changeTypeValue() {
      this.$emit("changeType", this.typeValue);
    },
    changeTypeValueByPhone() {
      this.typeValue = 2;
      this.$emit("changeTypeByPhone", this.typeValue);
    },
    changeSortValue(item) {
      this.sortChose = item;
      this.isShowSort = false;
      this.$emit("changeSort", item.value);
    },
    phoneSelectTop(item) {
      this.phoneTop = item.id;
      if (item.id == 2) {
        this.changeTypeValueByPhone();
      } else {
        this.$emit("getList", item.id);
      }
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.currentWidth = getWidth();
    if (this.currentWidth <= 768) {
      this.isPhone = true;
    } else {
      this.isPhone = false;
    }
    let that = this;
    window.onresize = function() {
      if (that.$refs.Products) {
        that.currentWidth = getWidth();
        if (that.currentWidth <= 768) {
          that.isPhone = true;
        } else {
          that.isPhone = false;
        }
      }
    };
    this.changeSortName(this.sortValue);
    this.getGoodsCates();
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.products {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  p {
    margin-bottom: 0;
  }

  .pc {
    .options {
      width: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;

      .bottonGroup {
        display: flex;
        align-items: center;

        .pcButton {
          background: rgba(255, 255, 255, 0.1) !important;
          margin: 0 10px 0 0;
          padding: 5.5px 13px;
          cursor: pointer;

          span {
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #aaaaaa;
          }
        }

        .pcButton:last-child {
          margin: 0;
        }

        .isClick {
          background: #00ffb0 !important;

          span {
            font-weight: 600;
            color: #1c1e1e !important;
          }
        }
      }

      .selectGroup {
        display: flex;

        .selectItem {
          position: relative;
          margin-right: 30px;

          .currentSelet {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            cursor: pointer;

            .pcTypesIcon {
              width: 12px;
              height: 12px;
            }

            .currentName {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
              margin: 0 6px;
            }

            .pcDropdownIcon {
              width: 9px;
              height: 5px;
            }
          }

          .selectOptions {
            position: absolute;
            top: 22px;
            right: 0;
            z-index: 9;
            width: 138px;
            background: #1e2020;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
            border-radius: 4px;
            padding: 10px 0;
            visibility: hidden;

            .selectType {
              // margin-top: 10px;
              height: 34px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 15px 10px;
              cursor: pointer;

              p {
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #8e8f8f;
              }

              .pcChoseIcon {
                width: 14px;
                height: 10px;
              }

              .isChoseText {
                color: #01f5ab;
              }
            }

            .selectType:hover {
              background: rgba(255, 255, 255, 0.03);
            }

            .selectType:first-child {
              margin-top: 0;
            }
          }

          .isShow {
            -webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;

            @-webkit-keyframes fade-in {
              0% {
                opacity: 0;
              }

              100% {
                opacity: 1;
              }
            }

            @keyframes fade-in {
              0% {
                opacity: 0;
              }

              100% {
                opacity: 1;
                visibility: visible;
              }
            }
          }

          .isClose {
            -webkit-animation: fade-out 0.3s ease-out both;
            animation: fade-out 0.3s ease-out both;

            @-webkit-keyframes fade-out {
              0% {
                opacity: 1;
              }

              100% {
                opacity: 0;
              }
            }

            @keyframes fade-out {
              0% {
                opacity: 1;
              }

              100% {
                opacity: 0;
                visibility: hidden;
              }
            }
          }
        }

        .selectItem:last-child {
          margin-right: 0px;
        }
      }
    }

    .searchResult {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 20px;

      .totalNum {
        color: #00ffb0;
      }
    }

    .productsContent {
      display: flex;
      flex-wrap: wrap;
      width: 100%;
      margin-top: 20px;

      .productItem {
        margin-right: 32px;
        margin-bottom: 32px;
        border-radius: 5px;
        position: relative;

        .productImg {
          height: 276px;
          display: flex;
          align-items: center;
          background: #000;

          img {
            width: 276px;
            height: auto;
            max-height: 276px;
            cursor: pointer;
          }
        }

        .pcSellout {
          position: absolute;
          top: 0;
          left: 0;
        }

        .overTimeMask {
          display: flex;
          justify-content: center;
          align-items: center;
          position: absolute;
          left: 0;
          // right: 0;
          top: 0;
          // bottom: 0;
          width: 276px;
          height: auto;
          height: 276px;
          background: #000000;
          opacity: 0.6;
          font-size: 36px;
          font-weight: 700;
          color: #999999;
          font-family: "Lantinghei SC";
        }

        .beginTime {
          position: absolute;
          top: 251px;
          left: 0;
          width: 154px;
          height: 25px;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #000000;
          background: url("../../../../../assets/images/product/sellDayBg.png");
          background-size: 100% 100%;
        }

        .productDesc {
          width: 276px;
          padding: 20px 15px 25px 20px;
          position: relative;
          background: #2b2c2d;

          .productImage {
            width: 126px;
            height: 191px;
            position: absolute;
            right: 0;
            top: 0;
            cursor: unset;
          }

          .productTitle {
            margin: 0;
            font-size: 20px;
            font-weight: 600;
            color: #ffffff;
            font-family: PingFangSC-Semibold, PingFang SC;
            margin-bottom: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            min-height: 52px;
            position: relative;
            z-index: 2;
            line-height: 26px;
          }

          .defaultInfo {
            display: flex;
            align-items: center;

            img {
              width: 28px;
              height: 28px;
              margin-right: 10px;
              cursor: unset;
            }

            p {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #ffffff;
            }
          }

          .pcBtn {
            width: 246px;
            height: 36px;
            position: relative;
            z-index: 2;
            background-size: 100% 100%;
            font-size: 14px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #1e2020 !important;
            margin: 0;
            margin-top: 16px;
            box-shadow: none;
            background-color: transparent !important;
            border-radius: unset !important;
          }

          .lookOver {
            background-image: url("../../../../../assets/images/mail/lookOver.png");
          }

          .sellout {
            background-image: url("../../../../../assets/images/mail/sellout.png");
          }
        }
      }

      .productItem:nth-child(4n) {
        margin-right: 0;
      }
    }

    .pcPage {
      display: flex;
      justify-content: center;
      width: 100%;
      margin-top: 28px;
      margin-bottom: 60px;

      /deep/ .el-pagination__total {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }

      /deep/ .el-input__inner {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
        background: #2b2c2d;
        border: none;
        cursor: default;
        padding: 0;
      }

      /deep/ .el-pagination .btn-prev {
        background: #2b2c2d;
        color: #bbbfc3;
        margin-right: 10px;
        padding: 0;
      }

      /deep/ .el-pagination .btn-next {
        background: #2b2c2d;
        color: #bbbfc3;
        padding: 0;
      }

      /deep/ .el-pagination__jump {
        color: #fff !important;
      }

      .el-pagination .btn-prev:hover {
        color: #00ffb0 !important;
      }

      .el-pagination .btn-next:hover {
        color: #00ffb0 !important;
      }

      /deep/ .el-pager li {
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #ffffff;
        background: #2b2c2d;
        margin-right: 10px;
        padding: 0;
      }

      /deep/ .el-pager li:hover {
        color: #00ffb0 !important;
      }

      /deep/ .el-pager li.active {
        color: #1e2020 !important;
        cursor: default;
        background: #00ffb0 !important;
      }
    }
  }

  .phone {
    display: none;
  }

  .noneTip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .deafultImage {
      width: 430px;
    }

    p {
      margin-top: 20px;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }
}

@media screen and (max-width: 768px) {
  .products {
    padding: 20px 30px 62px 30px;

    // padding: 20px 30px 0px 30px;
    .pc {
      display: none;
    }

    .phone {
      display: block;

      .phoneSelect {
        display: block;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 49px;
        position: relative;

        .tabSelect {
          display: flex;
          align-items: center;

          .tabTitle {
            font-size: 28px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #ffffff;
            opacity: 0.4;
            margin-right: 48px;
            display: flex;
            justify-content: center;
          }

          .isSelect {
            font-size: 36px;
            opacity: 1;
            font-weight: bold;
            position: relative;
            text-align: center;

            span {
              position: inherit;
              z-index: 1;
            }

            .backLine {
              width: 32px;
              height: 8px;
              background: #00ffb0;
              position: absolute;
              bottom: -15px;
            }
          }

          .tabTitle:last-child {
            margin-right: 0px;
          }
        }

        .downSelect {
          border-radius: 5px;
          padding: 18px 14px;
          position: absolute;
          top: -20px;
          right: 0;
          z-index: 999;

          .currentSelect {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .sortName {
              font-size: 24px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #ffffff;
            }

            .sortImage {
              width: 24px;
              height: 24px;
              margin-right: 12px;
            }

            .upSort {
              -webkit-animation: rotate-center-up 0.3s ease-in-out both;
              animation: rotate-center-up 0.3s ease-in-out both;

              @-webkit-keyframes rotate-center-up {
                0% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }

                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }

              @keyframes rotate-center-up {
                0% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }

                100% {
                  -webkit-transform: rotate(360deg);
                  transform: rotate(360deg);
                }
              }
            }

            .downSort {
              -webkit-animation: rotate-center 0.3s ease-in-out both;
              animation: rotate-center 0.3s ease-in-out both;

              @-webkit-keyframes rotate-center {
                0% {
                  -webkit-transform: rotate(0);
                  transform: rotate(0);
                }

                100% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
              }

              @keyframes rotate-center {
                0% {
                  -webkit-transform: rotate(0);
                  transform: rotate(0);
                }

                100% {
                  -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
                }
              }
            }
          }

          .selectGroup {
            display: none;

            .selectItem {
              margin-top: 35px;
              display: flex;
              align-items: center;
              justify-content: flex-end;

              p {
                font-size: 24px;
                font-family: Microsoft YaHei;
                font-weight: 400;
                color: #484848;
              }

              .isSelect {
                color: #fff;
              }

              .rightIcon {
                width: 18px;
                height: 13px;
              }
            }
          }

          .isShowGroup {
            display: block;
          }
        }

        .downSelectMark {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          // width: 100%;
          // height: 100%;
          background: rgba(0, 0, 0, 0.6);
        }

        .showMark {
          -webkit-animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
          animation: fade-in 0.3s cubic-bezier(0.39, 0.575, 0.565, 1) both;
          z-index: 99;

          @-webkit-keyframes fade-in {
            0% {
              opacity: 0;
            }

            100% {
              opacity: 0.7;
            }
          }

          @keyframes fade-in {
            0% {
              opacity: 0;
            }

            100% {
              opacity: 0.7;
            }
          }
        }

        .closeMark {
          z-index: -1;
          -webkit-animation: fade-out 0.3 ease-out both;
          animation: fade-out 0.3 ease-out both;

          @-webkit-keyframes fade-out {
            0% {
              opacity: 0.7;
            }

            100% {
              opacity: 0;
            }
          }

          @keyframes fade-out {
            0% {
              opacity: 0.7;
            }

            100% {
              opacity: 0;
            }
          }
        }

        .borderColor {
          background-color: rgba(0, 0, 0, 0.9);
          // border: 1px solid #1e2020;
        }
      }

      .phoneOption {
        display: flex;
        align-items: center;
        width: 100%;
        position: relative;
        z-index: 1;
        overflow-x: auto;

        .phoneButton {
          margin: 0;
          padding: 12px;
          height: 52px;
          background-color: rgba(0, 0, 0, 0.1);
          border-radius: 8px;
          margin-bottom: 40px;
          margin-right: 16px;
          display: flex;
          align-items: center;
          justify-content: center;

          p {
            color: #ffffff;
            font-weight: 400;
            font-size: 28px;
            white-space: nowrap;
          }
        }

        .isClick {
          background: #00ffb0;

          p {
            color: #1c1e1e;
          }
        }
      }

      .phoneOption::-webkit-scrollbar {
        display: none;
      }

      .phoneProducts {
        display: block;
        // align-items: center;
        justify-content: space-between;
        display: flex;
        flex-direction: column;
        width: 100%;
        margin-bottom: 122px;

        .productGroup {
          align-items: center;
          justify-content: space-between;
          display: flex;
          flex-wrap: wrap;
          padding: 0 2px;

          .productItem {
            width: 47%;
            margin-right: 0;
            background: #2b2c2d;
            box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
            border-radius: 12px;
            margin-bottom: 26px;

            .productImages {
              position: relative;
              height: 100%;

              .productImageBox {
                position: relative;
                // height: 320px;
                height: 100%;
                display: flex;
                align-items: center;
                background-color: #000000;
                border-radius: 12px 12px 0px 0px;
                overflow: hidden;

                img {
                  width: 100%;
                  height: auto;
                  max-height: 320px;
                  box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.05);
                  border-radius: 12px 12px 0px 0px;
                }

                .sellout {
                  height: 320px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  z-index: 2;
                }

                .overTimeMask {
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  position: absolute;
                  left: 0;
                  // right: 0;
                  top: 0;
                  // bottom: 0;
                  width: 100%;
                  height: auto;
                  height: 320px;
                  height: 100%;
                  background: #000000;
                  opacity: 0.6;
                  font-size: 42px;
                  font-weight: 900;
                  color: #999999;
                  font-family: "Lantinghei SC";
                }
              }

              .sellDay {
                min-width: 240px;
                background: url("../../../../../assets/images/mobile/sellBtnBg.png");
                background-size: 100% 100%;
                font-size: 20px;
                font-weight: 500;
                color: #000000;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                bottom: 0;
                left: 0;
                padding: 6px 19px 2px 10px;
              }
            }

            .productDesc {
              padding: 16px 20px 28px 20px;

              .productTitle {
                font-size: 28px;
                margin-bottom: 24px;
                line-height: 36px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #ffffff;
                min-height: 72px;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
              }

              .productNumber {
                display: none;
              }

              .productLimit {
                display: none;
              }

              .buy {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .price {
                  font-size: 24px;
                  font-family: DINAlternate-Bold, DINAlternate;
                  font-weight: bold;
                  color: #00ffb0;

                  span {
                    font-size: 18px;
                    margin-right: 5px;
                  }
                }

                .buyButton {
                  display: none;
                }

                .phoneProductNumber {
                  display: block;
                  font-size: 20px;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #8e8f8f;
                }
              }
            }
          }
        }

        .productEnd {
          margin: 20px auto;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    .noneTip {
      min-height: 60vh;

      p {
        margin-top: 50px;
        font-size: 22px;
      }
    }
  }
}
</style>
